<template>
	<view class="content">
		<view class="card-wrap">
			<view class="card">
				<image class="card-img" mode="widthFix" :src="cardData.img"></image>
				<view class="card-time">有效日期：{{cardData.card_begin_time}}-{{cardData.card_end_time}}</view>
				<!-- <view class="card-title">充电月卡</view> -->
			</view>
		</view>
		<view class="list">
			<view :class="{item:true,active:currentIndex==index}" @click="handleListClick(index)" v-for="(item,index) in cardData.list" :key="index">
				<view class="power">{{item.power}}</view>
				<view class="money">{{item.price}}</view>
			</view>
		</view>
		<guarantee />
		<view class="txt">
			<view class="txt-title">温馨提示：</view>
			<view class="txt-content">{{cardData.list[currentIndex].descrip}}</view>
		</view>
		<view class="checkbox">
			<u-checkbox width="150rpx" v-model="checked" shape="circle" active-color="#0da297">点击确认并同意</u-checkbox>
			<text @click="handleLinkClick" class="checkbox-link">《月卡权益》</text>
		</view>
		
		<view class="bottom-operation-wrap">
			<view class="bottom-operation">	
				<view class="operation-item">
					<text class="operation-text-01">总计:</text><text class="operation-text-02">￥</text><text class="operation-text-03">{{cardData.upgrade==3?(cardData.list[currentIndex].this_pay-cardData.have_pay)/100:(cardData.list[currentIndex].this_pay/100)}}</text>
				</view>
				<view class="operation-item">
					<custom-button :loading="loading" @click="handlePayClick" :text="'确认支付'" :loading-text="'支付中...'"></custom-button>
				</view>
			</view>
			<view class="bottom-safe-area"></view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'monthlyFixed',
	data() {
		return {
			currentIndex:0,
			checked:false,
		};
	},
	props:{
		cardData: {
			type:Object,
			default:{}
		},
		loading: {
			type:Boolean,
			default:false
		}
	},
	methods:{
		//monthly benefits
		handleLinkClick(){
			
			uni.navigateTo({
			    url: '/pages/member/benefits?state=1&id='+this.cardData.cal_id
			});
		},
		//list
		handleListClick(index){
			this.currentIndex=index;
		},
		//pay
		handlePayClick(){
			if(!this.loading){
				//verify checked
				if(!this.checked){
					
					uni.pageScrollTo({
						duration:300,
						scrollTop: 1000,
					});
					this.$utils.toast('请您先同意月卡权益');
				}else{
					//默认索引
					let index=this.currentIndex;
					this.$emit('click',index);
				};
				
			};
		},
		
	}
};
</script>

<style lang="scss" scoped>
	.card-wrap{
		padding:30rpx;
		border-bottom:2rpx solid #E5E5E5;
	}
	.card{
		
		position:relative;
	}
	.card-img{
		width:100%;
		height:400rpx;
		display: block;
	}
	.card-type{
		position:absolute;
		right:40rpx;
		top:100rpx;
		line-height: 1;
	}
	.card-time{
		position:absolute;
		left:30rpx;
		bottom:30rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
	}
	.card-title{
		position:absolute;
		right:40rpx;
		top:26rpx;
		font-size: 50rpx;
		font-weight: 600;
		line-height: 1;
		color: #fff;
	}
	.txt{
		padding:30rpx;
		padding-bottom: 0;
	}
	.txt-title{
		font-size: 30rpx;
		font-weight: 600;
		color: #F00404;
		padding-bottom: 20rpx;
	}
	.txt-content{
		font-size: 28rpx;
		text-indent:2em;
		color: #333333;
	}
	.checkbox-link{
		position:relative;
		left:-18rpx;
		font-size:30rpx;
		color:#0DA297;
		vertical-align: middle;
	}
	.checkbox{
		text-align: center;
		padding-top:40rpx;
		
	}
	.bottom-operation-wrap{
		position: fixed;
		left:0;
		bottom:0;
		width:100%;
		border-top:2rpx solid #E5E5E5;
		background-color:#fff;
	}
	.bottom-operation{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.operation-item:nth-child(1){
		padding-left: 30rpx;
	}
	.operation-text-01{
		font-size: 28rpx;
		color: #333333;
	}
	.operation-text-02{
		font-size: 28rpx;
		color: #0DA297;
	}
	.operation-text-03{
		font-size: 56rpx;
		color: #0DA297;
	}
	.list{
		padding:0 30rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 2px solid #0DA297;
		border-radius: 24rpx;
		padding:20rpx 60rpx;
		color:#0DA297;
		font-size: 30rpx;
		margin-top: 30rpx;
		font-weight: 500;
	}
	.item.active{
		background-color:#0DA297;
		color:#fff;
	}
</style>
